<template>
  <div class="person">
    <div class="loading flex-center" :style="{ height: height + 'px', width: width + 'px'}" v-if="loading">
      <p ref="p"></p>
    </div>
    <div class="person-container">
      <header class="introduce">
        <el-row class="flex-between header" style="border-bottom: 1px solid #ececec;">
          <el-col class="name" :xs="24" :sm="12">
            <span>师晓栋</span>
          </el-col>
          <el-col class="position" :xs="24" :sm="12">
            <span>Web前端开发工程师</span>
          </el-col>
        </el-row>
        <el-row class="flex-between footer">
          <el-col class="left" :xs="24" :sm="12">
            <p v-for="(w, i) in personalIntro" :key="i" @click="college(i)">{{ w }}</p>
          </el-col>
          <el-col class="right" :xs="24" :sm="12">
            <p v-for="(w, i) in personalWeb" :key="w.url" @click="open(w, i)" v-show="i<2">{{ w.name }}</p>
            <a v-for="(w, i) in personalWeb" :key="i" @click="open(w, i)" v-show="i>1" :href="w.url">{{ w.name }}</a>
          </el-col>
        </el-row>
      </header>
      <main>
        <div class="work-company">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>经历</span>
            </div>
            <el-card v-for="(o, i) in experienceList" :key="i" class="box-card jl-content">
              <p class="comName">{{ o.Name }}</p>
              <p style="font-size: 12px">{{ o.sTime }} 至 {{ o.eTime }}</p>
              <el-tag type="success">{{ o.Tag }}</el-tag>
              <div>
                <p v-for="(w, wi) in o.Intro" :key="wi">{{ w }}</p>
              </div>
              <div style="margin-top: 15px;" v-for="(q, qi) in o.project" :key="qi">
                <p class="proName" @click="open1(q)">{{ q.proName }}（{{ q.proUrl }}）</p>
                <ul style="padding-left: 20px;font-size: 14px">
                  <li v-for="(e, ei) in q.list" :key="ei">{{ e }}</li>
                </ul>
              </div>
            </el-card>
          </el-card>
        </div>
        <div class="project">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>项目</span>
            </div>
            <el-card v-for="(q, qi) in proList" :key="qi" class="box-card">
              <p class="Name" @click="open2(q)">{{ q.Name }}（{{ q.Url }}）</p>
              <p style="font-size: 12px">{{ q.sTime }} 至 {{ q.eTime }}</p>
              <div>
                <el-tag v-for="(w, wi) in q.Tag" :key="wi">{{ w }}</el-tag>
              </div>
              <ul style="padding-left: 20px;font-size: 14px">
                <li v-for="(e, ei) in q.Intro" :key="ei">{{ e }}</li>
              </ul>
            </el-card>
          </el-card>
        </div>
        <div class="work-skill">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>技能</span>
            </div>
            <div v-if="!showBig" style="display: flex;">
              <div class="left" style="display: flex;flex-direction: column;flex-basis: 50%;padding-right: 10px">
                <el-card class="box-card jl-content" v-for="(o, i) in skillList" :key="i" v-show="i % 2 === 0">
                  <p class="comName">{{ o.Name }}</p>
                  <el-tag type="success">{{ o.Tag }}</el-tag>
                  <ul style="padding-left: 20px">
                    <li v-for="(w, wi) in o.Intro" :key="wi">{{ w }}</li>
                  </ul>
                </el-card>
              </div>
              <div class="right" style="display: flex;flex-direction: column;flex-basis: 50%;padding-left: 10px">
                <el-card class="box-card jl-content" v-for="(o, i) in skillList" :key="o.name" v-show="i % 2 !== 0">
                  <p class="comName">{{ o.Name }}</p>
                  <el-tag type="success">{{ o.Tag }}</el-tag>
                  <ul style="padding-left: 20px">
                    <li v-for="(w, wi) in o.Intro" :key="wi">{{ w }}</li>
                  </ul>
                </el-card>
              </div>
            </div>
            <div v-if="showBig">
              <div>
                <el-card class="box-card jl-content" v-for="(o, i) in skillList" :key="i">
                  <p class="comName">{{ o.Name }}</p>
                  <el-tag type="success">{{ o.Tag }}</el-tag>
                  <ul style="padding-left: 20px">
                    <li v-for="(w, wi) in o.Intro" :key="wi">{{ w }}</li>
                  </ul>
                </el-card>
              </div>
            </div>
          </el-card>
        </div>
      </main>
    </div>
  </div>
</template>

<script>
import { experienceList, proList, skillList } from './data'
export default {
  data () {
    return {
      loading: true,
      showBig: false,
      str: '   感谢您在百忙之中观看我的简历，不管能不能得到您的通知，都在此给您最美好的祝愿。祝愿您工作顺利，生活平安幸福。',
      curIndex: 0,
      timer: null,
      colorList: [ 'red', 'darkred', 'green', 'pink', 'Blue', 'Indigo', 'Violet' ],
      classList: [ 'bounceInLeft', 'fadeInLeftBig', 'rotateInUpLeft', 'jackInTheBox', 'zoomInLeft', 'slideInUp', 'zoomInUp' ],
      personalIntro: ['男 / 1995', '中北大学 软件工程', '本科 / 2018年毕业'],
      personalWeb: [
        {
          name: '我的个人博客',
          url: 'https://www.666ss.club/blog'
        },
        {
          name: '我的码云',
          url: 'https://gitee.com/sxd_my/events'
        },
        {
          name: '1447707563@qq.com',
          url: 'mailto:1447707563@qq.com'
        },
        {
          name: '13610658094',
          url: 'tel:13610658094'
        }
      ],
      experienceList,
      proList,
      skillList,
      height: this.$utils.common.getWindowWH().height,
      width: this.$utils.common.getWindowWH().width
    }
  },
  computed: {
  },
  mounted () {
    setTimeout(() => {
      this.timer = setInterval(this.inner, 200)
      this.showBig = this.width < 768
      window.onresize = () => {
        this.width = this.$utils.common.getWindowWH().width
        this.showBig = this.width < 768
      }
    }, 100)
  },
  methods: {
    inner () {
      if (this.curIndex++ < this.str.length) {
        const span = document.createElement('span')
        const isBlank = this.str.slice(this.curIndex, this.curIndex + 1) === ' '
        span.innerHTML = isBlank ? '&#x3000;' : this.str.slice(this.curIndex, this.curIndex + 1)
        const num = (Math.random() * 6).toFixed()
        const fontNum = (Math.random() * 40).toFixed()
        span.style.color = this.colorList[num]
        span.style.fontSize = fontNum < 20 ? 20 + 'px' : fontNum + 'px'
        span.style.letterSpacing = 2 + 'px'
        span.classList.add('animated')
        span.classList.add(this.classList[num])
        this.$refs.p.appendChild(span)
      } else {
        clearInterval(this.timer)
        this.timer = null
        this.loading = false
      }
    },
    college (i) {
      if (i === 1) {
        window.open('http://www.nuc.edu.cn/')
      }
    },
    open (e, i) {
      if (i < 2) {
        window.open(e.url)
      }
    },
    open1 (e) {
      window.open(e.proUrl)
    },
    open2 (e) {
      if (e.Url) {
        window.open(e.Url)
      }
    }
  },
  beforeDestroy () {
    clearInterval(this.timer)
    this.timer = null
  }
}
</script>

<style lang="less" scoped>
@import "Index";
</style>
